Page({
  data: {
    currentScenicIndex: 0, // 当前选中的景点索引
    showSuccessModal: false, // 是否显示成功弹窗
    scenicSpots: [
      {
        id: 1,
        name: '漓江',
        address: '广西桂林市',
        price: 0,
        image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.1vh4VtKL3MY49AJ0hcJNnAHaE8?w=245&h=180&c=7&r=0&o=7&pid=1.7&rm=3',
        description: '漓江是中国广西壮族自治区桂林市的一条河流，以其壮美的喀斯特地貌和清澈的河水而闻名。'
      },
      {
        id: 2,
        name: '象鼻山',
        address: '广西桂林市象山区',
        price: 0,
        image: 'https://ts1.tc.mm.bing.net/th/id/R-C.f7a79bdd4496a563e4844890c509dd3d?rik=BNsazz%2fdEgDd8Q&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50045%2f9350.jpg_wh1200.jpg&ehk=g96SB2L4JMU3krnBbCGGa3q%2bdOe2zY7%2byrOx3VK5jns%3d&risl=&pid=ImgRaw&r=0',
        description: '象鼻山是桂林市的标志性景点，因山形酷似一只站在江边伸鼻豪饮漓江甘泉的巨象而得名。'
      },
      {
        id: 3,
        name: '日月塔',
        address: '广西桂林市秀峰区',
        price: 0,
        image: 'https://img.pconline.com.cn/images/upload/upc/tx/photoblog/1805/08/c4/86217683_1525760763721_mthumb.jpg',
        description: '日月塔是桂林市的两座标志性塔楼，日塔为铜塔，月塔为琉璃塔，夜晚灯光璀璨，景色迷人。'
      }
    ],
    bookingData: {
      date: '',
      time: '',
      count: 1,
      name: '',
      phone: ''
    }
  },

  onLoad: function() {
    // 页面加载时初始化数据
    this.loadBookingData();
  },

  // 加载保存的预约数据
  loadBookingData: function() {
    const that = this;
    wx.getStorage({
      key: 'bookingData',
      success: function(res) {
        that.setData({
          bookingData: res.data
        });
      }
    });
  },

  // 保存预约数据到本地存储
  saveBookingData: function() {
    wx.setStorage({
      key: 'bookingData',
      data: this.data.bookingData
    });
  },

  // 切换景点
  switchScenic: function(e) {
    const index = e.currentTarget.dataset.index;
    this.setData({
      currentScenicIndex: index
    });
  },

  // 获取当前选中的景点
  getCurrentScenic: function() {
    return this.data.scenicSpots[this.data.currentScenicIndex];
  },

  // 日期选择
  onDateChange: function(e) {
    this.setData({
      'bookingData.date': e.detail.value
    });
    this.saveBookingData();
  },

  // 时间选择
  onTimeChange: function(e) {
    this.setData({
      'bookingData.time': e.detail.value
    });
    this.saveBookingData();
  },

  // 减少人数
  decreaseNumber: function() {
    if (this.data.bookingData.count > 1) {
      this.setData({
        'bookingData.count': this.data.bookingData.count - 1
      });
      this.saveBookingData();
    }
  },

  // 增加人数
  increaseNumber: function() {
    this.setData({
      'bookingData.count': this.data.bookingData.count + 1
    });
    this.saveBookingData();
  },

  // 姓名输入
  onNameInput: function(e) {
    this.setData({
      'bookingData.name': e.detail.value
    });
    this.saveBookingData();
  },

  // 电话输入
  onPhoneInput: function(e) {
    this.setData({
      'bookingData.phone': e.detail.value
    });
    this.saveBookingData();
  },

  // 提交预约
  submitBooking: function() {
    const bookingData = this.data.bookingData;
    const currentScenic = this.getCurrentScenic();
    
    // 表单验证
    if (!bookingData.date) {
      wx.showToast({ title: '请选择日期', icon: 'none' });
      return;
    }
    if (!bookingData.time) {
      wx.showToast({ title: '请选择时间', icon: 'none' });
      return;
    }
    if (!bookingData.name) {
      wx.showToast({ title: '请输入联系人', icon: 'none' });
      return;
    }
    if (!bookingData.phone) {
      wx.showToast({ title: '请输入联系电话', icon: 'none' });
      return;
    }
    
    // 手机号格式验证
    if (!/^1[3-9]\d{9}$/.test(bookingData.phone)) {
      wx.showToast({ title: '请输入正确的手机号', icon: 'none' });
      return;
    }
    
    // 保存预约记录
    this.saveBookingRecord(currentScenic);
    
    // 显示成功弹窗
    this.setData({
      showSuccessModal: true
    });
  },

  // 保存预约记录
  saveBookingRecord: function(scenic) {
    const bookingRecord = {
      id: new Date().getTime(),
      scenicId: scenic.id,
      scenicName: scenic.name,
      date: this.data.bookingData.date,
      time: this.data.bookingData.time,
      count: this.data.bookingData.count,
      name: this.data.bookingData.name,
      phone: this.data.bookingData.phone,
      bookingTime: new Date().toLocaleString(),
      status: '待使用'
    };
    
    // 获取现有的预约记录
    wx.getStorage({
      key: 'bookingRecords',
      success: (res) => {
        const records = res.data;
        records.push(bookingRecord);
        wx.setStorage({
          key: 'bookingRecords',
          data: records
        });
      },
      fail: () => {
        // 如果没有预约记录，创建新数组
        wx.setStorage({
          key: 'bookingRecords',
          data: [bookingRecord]
        });
      }
    });
  },

  // 关闭弹窗
  closeModal: function() {
    this.setData({
      showSuccessModal: false
    });
  },

  // 跳转到预约记录页面
  goToBookings: function() {
    wx.navigateTo({
      url: '/pages/bookings/bookings'
    });
  }
})